import React, { Suspense } from "react";
import { HashRouter as Hash, useRoutes, Navigate } from "react-router-dom";

import { Loading } from "../components/Loading";
import LoginRoutes from "./login/route";
import ErrorRoutes from "./errors/route";
import MainRoutes from "./main/route";

const MainIndex = () => {
  return (
    <div className="mains">
      <LayoutConfig />
    </div>
  );
};

const LayoutConfig = () => {
  return (
    <Hash>
      <Suspense fallback={Loading()}>
        <RouterIndex></RouterIndex>
      </Suspense>
    </Hash>
  );
};

const RouterIndex = () => {
  const elements = useRoutes([
    {
      path: "/",
      element: <Navigate replace to="/login" />,
    },
    ...LoginRoutes,
    ...ErrorRoutes,
    ...MainRoutes,
    {
      path: "*",
      element: <Navigate replace to="/404" />,
    },
  ]);
  return elements;
};

export default MainIndex;
